<template>
	<div id="Award_Setting_Wrapper">
		<div style="overflow: auto; height: 75vh; margin-bottom: 18px">
			<div id="Award_Setting" v-for="(item, index) in itemcount" :key="index" style="margin-bottom: 18px">
				<div style="margin-bottom: 5px; display: flex; justify-content: space-between; padding-right: 10px; box-sizing: border-box">
					<span>请设置活动需要派发的奖项</span>
					<div style="display: inline-block">
						<span @click="handleSort" class="iconfont icon-tiaozhengshunxu"> </span>
						<span style="font-size: 12px; margin: 0 5px">调整顺序</span>
						<span
							style="
								font-size: 18px;
								display: inline-block;
								width: 20px;
								height: 20px;
								line-height: 20px;
								border-radius: 5px;
								text-align: center;
								cursor: pointer;
								background: #409eff;
								color: #fff;
							"
							@click="handleDecrease"
							>-</span
						>
						<span
							style="
								font-size: 18px;
								display: inline-block;
								width: 20px;
								height: 20px;
								line-height: 20px;
								border-radius: 5px;
								text-align: center;
								cursor: pointer;
								background: #409eff;
								color: #fff;
								margin-left: 10px;
							"
							@click="handleIncrease"
							>+</span
						>
					</div>
				</div>
				<div :id="`tab`">
					<div :class="`tab_menu tab_menu${itemcount}`">
						<ul>
							<li v-for="(item, index) in list" :key="index" :class="{ selected: !item.show }">
								<a href="javascript: void(0)">{{ item.title }}</a>
							</li>
							<!-- <li
								@dragenter="dragenter($event, index)"
								@dragover="dragover($event, index)"
								@dragstart="dragstart(index)"
								draggable
								v-for="(item, index) in list"
								:key="index"
								:class="{ selected: !item.show }"
							>
								<a href="javascript: void(0)">{{ item.title }}</a>
							</li> -->
							<!-- <li><a href="javascript: void(0)">奖项二</a></li>
                            <li><a href="javascript: void(0)">奖项三</a></li>
                            <li><a href="javascript: void(0)">奖项四</a></li>
                            <li><a href="javascript: void(0)">奖项五</a></li>
                            <li><a href="javascript: void(0)">奖项六</a></li>
                            <li><a href="javascript: void(0)">奖项七</a></li> -->
						</ul>
					</div>
					<div :class="`tab_box tab_box${itemcount}`">
						<!-- ================================================ -->
						<div v-for="(item, index) in list" :key="index" :class="{ hide: item.show }">
							<Form :title="item.title" :ref="`Form${index + 1}`" />
						</div>
						<!-- ================================================ -->
						<!-- <div class="hide">
                            <Form :title="'选项二'" />
                        </div>
                        <div class="hide">
                            <Form :title="'选项三'" />
                        </div>
                        <div class="hide">
                            <Form :title="'选项四'" />
                        </div>
                        <div class="hide">
                            <Form :title="'选项五'" />
                        </div>
                        <div class="hide">
                            <Form :title="'选项六'" />
                        </div>
                        <div class="hide">
                            <Form :title="'选项七'" />
                        </div> -->
					</div>
				</div>
			</div>
		</div>
		<!-- <el-button @click="handleResetForm">重置</el-button>
		<el-button @click="handleSubmit" type="primary">保存</el-button> -->
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: [
					{
						show: false,
						title: '选项一'
					},
					{
						show: true,
						title: '选项二'
					},
					{
						show: true,
						title: '选项三'
					},
					{
						show: true,
						title: '选项四'
					},
					{
						show: true,
						title: '选项五'
					},
					{
						show: true,
						title: '选项六'
					},
					{
						show: true,
						title: '选项七'
					},
					{
						show: true,
						title: '选项八'
					},
					{
						show: true,
						title: '选项九'
					}
				],
				dragIndex: '',
				enterIndex: '',
				itemcount: 1
			};
		},
		mounted() {
			setTimeout(() => {
				// let oTab = document.getElementById('tab');
				let aLi = document.querySelectorAll(`.tab_menu${this.itemcount} li`);
				// let oTabBox = document.querySelectorAll('#tab > div')[1];
				let aBox = document.querySelectorAll(`.tab_box${this.itemcount} > div`);
				console.log(aLi, aBox);
				for (let i = 0; i < aLi.length; i++) {
					aLi[i].index = i;
					aLi[i].onclick = function () {
						for (let j = 0; j < aLi.length; j++) {
							aLi[j].className = ''; //取消菜单样式
							aBox[j].className = 'hide'; //隐藏所有的tabDiv
						}
						aLi[this.index].className = 'selected';
						aBox[this.index].className = '';
					};
				}
			}, 400);
		},
		methods: {
			handleClick() {
				this.$nextTick(() => {
					let aLi = document.querySelectorAll(`.tab_menu${this.itemcount} li`);
					let aBox = document.querySelectorAll(`.tab_box${this.itemcount} > div`);
					console.log(aLi, aBox);
					aLi = [...aLi].splice((this.itemcount - 1) * this.list.length, this.list.length);
					aBox = [...aBox].splice((this.itemcount - 1) * this.list.length, this.list.length);
					for (let i = 0; i < aLi.length; i++) {
						aLi[i].index = i;
						aLi[i].onclick = function () {
							for (let j = 0; j < aLi.length; j++) {
								aLi[j].className = ''; //取消菜单样式
								aBox[j].className = 'hide'; //隐藏所有的tabDiv
							}
							aLi[this.index].className = 'selected';
							aBox[this.index].className = '';
						};
					}
				});
			},
			handleSort() {
				// let aLi = document.querySelectorAll('.tab_menu ul li')
				// for(let item of aLi){
				//     item.classList.remove('selected')
				// }
			},
			// dragstart(index) {
			// 	this.dragIndex = index;
			// },
			// dragenter(e, index) {
			// 	e.preventDefault();
			// 	// this.list = [...this.list];
			// 	// 避免源对象触发自身的dragenter事件
			// 	if (this.dragIndex !== index) {
			// 		// 避免重复触发目标对象的dragenter事件
			// 		if (this.enterIndex !== index) {
			// 			const moving = this.list[this.dragIndex];
			// 			this.list.splice(this.dragIndex, 1);
			// 			this.list.splice(index, 0, moving);
			// 			// 排序变化后目标对象的索引变成源对象的索引
			// 			this.dragIndex = index;
			// 		} else {
			// 			this.enterIndex = index;
			// 		}
			// 	}

			// 	this.list.forEach((item) => {
			// 		item.show = true;
			// 	});
			// 	this.list[this.dragIndex].show = false;
			// },
			// dragover(e, index) {
			// 	e.preventDefault();
			// },
			// handleResetForm() {
			// 	this.form = {};
			// },
			// handleSubmit() {
			// 	console.log(this.$refs.Form1[0].form.name);
			// },
			handleDecrease() {
				this.itemcount -= 1;
				if (this.itemcount < 1) {
					// this.$confirm('确定要删除吗？', '提示', {
					// 	type: 'warning'
					// })
					// 	.then(() => {
					// 		this.itemcount -= 1;
					// 	})
					// 	.catch(() => {
					// 		this.itemcount = 1;
					// 	});

					this.itemcount = 1;
				}
			},
			handleIncrease() {
				this.itemcount += 1;
				this.handleClick();
			}
		},
		components: {
			Form: () => import('./AwardSetting/Form.vue')
		}
	};
</script>
<style lang='scss'>
	#Award_Setting_Wrapper {
		/* 定义滚动条样式 */
		::-webkit-scrollbar {
			width: 6px;
			height: 6px;
			background-color: rgba(0, 0, 0, 0.1);
		}

		/*定义滚动条轨道 内阴影+圆角*/
		::-webkit-scrollbar-track {
			box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.15);
			border-radius: 10px;
			background-color: rgba(0, 0, 0, 0.15);
		}

		/*定义滑块 内阴影+圆角*/
		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.15);
			background-color: rgba(0, 0, 0, 0.15);
		}
		// ======================================================================

		#Award_Setting {
			.icon-tiaozhengshunxu {
				vertical-align: middle;
				color: #409eff;
				cursor: pointer;
			}
			.el-form-item__label {
				color: #000;
			}
			width: 100%;
			height: auto;
			border: 1px solid rgba($color: #000000, $alpha: 0.1);
			box-sizing: border-box;
			padding: 5px;
			.tab_menu .selected {
				a {
					color: rgba(11, 124, 223, 0.94);
				}
			}
			.tab_menu ul {
				height: 30px;
			}
			.tab_menu ul li {
				float: left;
				list-style: none;
				width: calc((100% - 25px) / 9);
				height: 30px;
				color: #000;
				border: 1px solid rgba($color: #000000, $alpha: 0.1);
				text-align: center;
				line-height: 30px;
				margin-left: -1px;
				cursor: move;
			}
			.tab_menu ul li:nth-child(even) {
				background: rgba($color: #000000, $alpha: 0.1);
			}
			.tab_menu ul li a {
				text-decoration: none;
				color: #000;
				font-size: 12px;
				cursor: move;
			}
			.tab_box {
				width: 100%;
				height: auto;
			}

			.tab_box .hide {
				display: none;
			}
		}
	}
</style>